<template>
  <div class="menu-wrapper">
<!--    :rules="rules"-->
    <el-form ref="shopForm" :model="form"  label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="店招海报" prop="address">
            <single-upload v-model="form.doorPhoto"
                           style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="品牌故事" prop="address">
            <tinymce v-model="form.content" :height="400"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
<!--        :loading="clicked"-->
        <el-button  type="primary"  @click="updateshop('shopForm')">
          &nbsp&nbsp修 改&nbsp&nbsp
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}
</style>
<script>
import {mapGetters} from 'vuex';
import { update } from '@/api/sysMch'
import Tinymce from '@/components/Tinymce'
import singleUpload from '@/components/Upload/singleUpload'
export default {
  computed: {
    ...mapGetters([
      'mchId'
    ])
  },
  components: {
    Tinymce,
    singleUpload
  },
  data() {
    return {
      form: {
        doorPhoto:'',
        content:''
      },
    }
  },
  props: {
    shopgetinfo: {
      type: Object,
    },
  },
  created() {
    this.form = this.shopgetinfo
  },
  watch: {
    shopgetinfo: {
      handler(val, old) {
        this.form = val
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    updateshop(form) {
      const _this = this
      this.$refs[form].validate((valid) => {
        if (valid) { // 校验表单
          _this.clicked = true
          const date = new Date()
          this.form.modifyDate = date
          let params = {
            "content":  _this.form.content,
            "doorPhoto": _this.form.doorPhoto,
            "id": this.mchId,
          }
            update(params).then(response => {
              this.$message.success("修改成功");
              _this.clicked = false
          }).catch(error => {
            _this.clicked = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  }
}
</script>
